<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>真题演练 - 系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/exam.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="sub-header">
            <a href="index.html" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1>真题演练</h1>
            <div class="header-action">
                <i class="fas fa-search"></i>
            </div>
        </header>

        <!-- 年份选择 -->
        <div class="year-selector">
            <div class="year active">2022年</div>
            <div class="year">2021年</div>
            <div class="year">2020年</div>
            <div class="year">2019年</div>
            <div class="year">2018年</div>
            <div class="year">更多</div>
        </div>

        <!-- 试卷列表 -->
        <section class="exam-list">
            <div class="exam-card">
                <div class="exam-info">
                    <h3>2022年上半年系统架构设计师考试真题</h3>
                    <div class="exam-meta">
                        <span><i class="fas fa-file-alt"></i> 75题</span>
                        <span><i class="fas fa-clock"></i> 150分钟</span>
                        <span><i class="fas fa-user-graduate"></i> 12,560人已做</span>
                    </div>
                </div>
                <div class="exam-actions">
                    <a href="exam-question.html" class="start-btn">开始做题</a>
                    <button class="favorite-btn"><i class="far fa-star"></i></button>
                </div>
            </div>

            <div class="exam-card">
                <div class="exam-info">
                    <h3>2022年下半年系统架构设计师考试真题</h3>
                    <div class="exam-meta">
                        <span><i class="fas fa-file-alt"></i> 75题</span>
                        <span><i class="fas fa-clock"></i> 150分钟</span>
                        <span><i class="fas fa-user-graduate"></i> 10,890人已做</span>
                    </div>
                </div>
                <div class="exam-actions">
                    <a href="exam-question.html" class="start-btn">开始做题</a>
                    <button class="favorite-btn"><i class="far fa-star"></i></button>
                </div>
            </div>

            <div class="exam-card">
                <div class="exam-info">
                    <h3>2021年上半年系统架构设计师考试真题</h3>
                    <div class="exam-meta">
                        <span><i class="fas fa-file-alt"></i> 75题</span>
                        <span><i class="fas fa-clock"></i> 150分钟</span>
                        <span><i class="fas fa-user-graduate"></i> 15,230人已做</span>
                    </div>
                </div>
                <div class="exam-actions">
                    <a href="exam-question.html" class="start-btn">开始做题</a>
                    <button class="favorite-btn"><i class="far fa-star"></i></button>
                </div>
            </div>

            <div class="exam-card">
                <div class="exam-info">
                    <h3>2021年下半年系统架构设计师考试真题</h3>
                    <div class="exam-meta">
                        <span><i class="fas fa-file-alt"></i> 75题</span>
                        <span><i class="fas fa-clock"></i> 150分钟</span>
                        <span><i class="fas fa-user-graduate"></i> 14,780人已做</span>
                    </div>
                </div>
                <div class="exam-actions">
                    <a href="exam-question.html" class="start-btn">开始做题</a>
                    <button class="favorite-btn"><i class="far fa-star"></i></button>
                </div>
            </div>
        </section>

        <!-- 练习模式选择 -->
        <section class="practice-modes">
            <h2 class="section-title">练习模式</h2>
            <div class="mode-cards">
                <a href="exam-question.html" class="mode-card">
                    <i class="fas fa-random"></i>
                    <h3>随机练习</h3>
                    <p>从题库中随机抽取题目练习</p>
                </a>
                <a href="exam-question.html" class="mode-card">
                    <i class="fas fa-clock"></i>
                    <h3>模拟考试</h3>
                    <p>完整模拟真实考试环境</p>
                </a>
                <a href="exam-question.html" class="mode-card">
                    <i class="fas fa-exclamation-circle"></i>
                    <h3>错题重做</h3>
                    <p>针对性练习错误题目</p>
                </a>
                <a href="exam-question.html" class="mode-card">
                    <i class="fas fa-bookmark"></i>
                    <h3>收藏题目</h3>
                    <p>练习您收藏的重要题目</p>
                </a>
            </div>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="index.html">
                <i class="fas fa-home"></i>
                <span>学习</span>
            </a>
            <a href="profile.html">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="js/exam.js"></script>
</body>
</html> 